import React, { Component } from 'react';
import {Flex} from 'antd-mobile';
import {View, StyleSheet, Text, Image, FlatList, Dimensions, Platform, Alert} from 'react-native';
import {SignModule} from './../NativeToastAndroid';
const { height } = Dimensions.get('window');

export default class SignList extends Component{
    constructor(props) {
        super(props);
        this.state = {
            isRefreshing:false,
            dataSource:[],
            page_no:1,
            total_results:0,
            total_page:0,
        };
    }
    componentWillMount(){
        //获取数据
        this.getRankList(1);
    }
    componentWillReceiveProps(nextProps){
        console.log(nextProps);
        if(nextProps.freshFilm === false){
            this._onRefresh();
        }
    }
    _reFreshing(isRefreshing){
        if(isRefreshing == true){
            this.setState({
                isRefreshing:false
            })
        }else{
            this.setState({
                isRefreshing:true
            })
        }
    }
    //获取签到排名列表
    getRankList = (page_no)=>{
        if(Platform.OS === 'ios'){

        }else if(Platform.OS === 'android') {
            //getSignList(获取列表，当前页，每页条数)
            SignModule.getSignList(page_no,10,(data)=>{
                if(data.result === 'success'){
                    const returnData = JSON.parse(data.jsonBody);
                    let {signList,page_no,total_results,total_page} = returnData.data;
                    if(returnData.code === 0) {
                        let {dataSource} = this.state;
                        let temp = dataSource.concat(signList);
                        this.setState({
                            dataSource:temp,
                            page_no:page_no,
                            total_results:total_results,
                            total_page:total_page,
                            isRefreshing:false
                        })
                    }else{
                        const message = returnData.message;
                        this._reFreshing(this.state.isRefreshing);
                        Alert.alert(
                            '提示',
                            message,
                            [
                                {text:'OK'},
                            ]
                        )
                    }
                }else{
                    this._reFreshing(this.state.isRefreshing);
                    Alert.alert(
                        '提示',
                        '亲！服务器返回异常',
                        [
                            {text:'OK'},
                        ]
                    )
                }
            })
        }
    }
    _keyExtractor = (item) => item.id;

    //数据为空时渲染
    _renderEmpty = () => (
        <View style={{height:height-90}}><Text style={styles.bottomTipStyle}>暂无更多数据</Text></View>
    );
    //底部提示
    _renderFooter = () => (
        <View><Text style={styles.bottomTipStyle}>暂无更多数据</Text></View>
    );
    //下拉刷新
    _onRefresh = () => {
        this.setState({
            dataSource:[]
        })
        this.getRankList(1);
    };
    // 上拉加载更多
    _onEndReached = () => {
        const {page_no,total_page} = this.state;
        if(page_no+1>total_page && total_page<10){
            return;
        }
        this.getRankList(page_no+1);
    };
    _returnImage(url){
        if(url !== undefined){
            return ( <Image style={styles.userImage} source={{uri:url}} />)
        }else{
            return ( <Image style={styles.userImage} source={require('./../../../file/ic_default_head.png')} />)
        }
    };
    _returnNickName(name,number) {
        if (name !== undefined && name　!== '') {
           return(<Text numberOfLines={1}  style={styles.rankListName}>{name}</Text>)
        } else {
           return(<Text numberOfLines={1} style={styles.rankListName}>{'i西科'+number}</Text>)
        }
    };
    _renderItem = ({item,index}) => {
        return (
            <View style={styles.rankInfoBox} key={index}>
                <Flex direction="row" justify="between" style={{marginTop:15}}>
                    <Text style={styles.rankText}>{item.rank}</Text>
                    <View style={{width:200,marginLeft:10}}>
                        <Flex direction="row" justify="start">
                            {
                                this._returnImage(item.icon_url)
                            }
                            <Flex direction="column" justify="between" style={{width:150}}>
                                <View style={{margin:5}}>
                                    {
                                        this._returnNickName(item.nick_name,item.number)
                                    }
                                    <Text style={styles.rankListConllege}>{item.college}</Text>
                                </View>
                            </Flex>
                        </Flex>
                    </View>
                    <Text style={styles.rankListTime}>{forrmatTime(item.sign_time)}</Text>
                </Flex>
            </View>
        )
    };
    render() {
        return (
            <Flex style={styles.signBox} direction="column">
                <View style={styles.rankListBox}>
                    <FlatList
                        data={this.state.dataSource}
                        renderItem={this._renderItem}
                        keyExtractor={this._keyExtractor}
                        refreshing={this.state.isRefreshing}
                        onRefresh={this._onRefresh}
                        onEndReached={this._onEndReached}
                        onEndReachedThreshold={0.2}
                        ListFooterComponent={this._renderFooter}
                        ListEmptyComponent={this._renderEmpty}
                    />
                </View>
            </Flex>
        )
    }
}
function forrmatTime(getTime) {
    let time = Date.parse(getTime);
    time = new Date(time);
    let hours  = time.getHours();
    let minutes = time.getMinutes();
    let returnTime = [hours,minutes].join(':');
    return returnTime;
}
const styles = StyleSheet.create({
    signBox:{
        backgroundColor:'#FFFFFF',
        height:'100%'
    },
    //列表样式
    rankListBox:{
        width:"100%",
    },
    rankInfoBox:{
        height:70,
        borderBottomWidth:1,
        borderBottomColor:'#f1f1f1'
    },
    userImage:{
        width:40,
        height:40,
        borderRadius:20
    },
    bottomTipStyle:{
        textAlign:'center'
    },
    rankText:{
        color:'#5873EB',
        fontSize:24,
        marginLeft:10,
        width:40
    },
    rankListName:{
        color:'#5E6379',
        fontSize:16
    },
    rankListConllege:{
        color:'#5873EB',
        fontSize:12
    },
    rankListTime:{
        width:60,
        color:'#5E6379',
        fontSize:18,
        marginRight:10
    }
})
